<template>
  <div>
    <el-row>

      <el-dropdown >
        <span class="el-dropdown-link subsType">
          {{activeSubsType}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <!--:key 需要使用显式键名,否则warn-->
          <el-dropdown-item  v-for="subsType in subsTypeList" :key="subsType">
            <span>{{subsType}}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-divider/>
    </el-row>

    <div>
      <el-menu
        :default-active="activeCollection"
        text-color="#333333"
        @select="selectHandle"
        class="el-menu-vertical-demo"
      >
        <el-menu-item
          :index="collection.index"
          v-for="collection in collectionType"
          :key="collection.index"
        >
          <img :src="collection.url" width="40" height="40" class="coll-img"/>
          <span class="item">{{collection.item}}</span>

        </el-menu-item>
      </el-menu>


    </div>

  </div>
</template>

<script>
  export default {
    name: "SubsList",
    data() {
      return {
        activeSubsType: '全部关注',
        subsTypeList: ['全部关注','只看作者','最近更新'],
        activeCollection: 'recommend',
        collectionType: [
          {index:'recommend',item:'推荐关注',url: 'https://murasakichigo.xyz/my-jianshu-simu/assets/img/subs/addFolow.png'}, //没有好外链
          {index:'2',item:'哲学思考',url: 'https://murasakichigo.xyz/my-jianshu-simu/assets/img/subs/332293730045332541.jpg'},
          {index:'3',item:'生活记事',url: 'https://murasakichigo.xyz/my-jianshu-simu/assets/img/subs/1.jpg'},
          {index:'4',item:'地理故事',url: 'https://murasakichigo.xyz/my-jianshu-simu/assets/img/subs/sy_20091020135145113016.jpg'},


        ],

      }
    },
    methods: {
      selectHandle(index) {
        if (index === 'recommend') this.$router.push('/subscriptions/'+index);
        else this.$router.push('/subscriptions/common/'+index);

      },
      getLastUri() {
        let uri = this.$route.path.split("/");
        return uri[uri.length - 1];
      },
    },
    created() {
      let uri = this.getLastUri();
      if (uri !== 'recommend') this.activeCollection = uri;
    },

  }
</script>

<style scoped lang="less">
  .el-dropdown {
    font-size: 15px;
    margin-left: 10px;
    margin-top: 10px;
  }

  .el-divider {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .el-menu {
  }

  .coll-img {
    border-radius: 5px;
  }
  .item {
    margin-top: 5px;
    margin-left: 10px;
  }



</style>